<template>
    <section>
        <el-col :span="24">
            <el-button type="info" class="el-icon-search" size="small" plain @click="openBtn">
                选择样衣工序
            </el-button>
            <el-table :header-cell-style="{ background: '#F3F4F7', color: '#555' }" class="yy-table-box" :data="yyData" :max-height="height" style="width: 100%;margin-top: 2px;" border size="mini">
                <el-table-column align="center" label="删除" width="60">
                    <template slot-scope="scope">
                        <el-button type="text" class="el-icon-delete" @click="delBtn(scope.$index)"></el-button>
                    </template>
                </el-table-column>
                <el-table-column type="index" label="序号" align="center"></el-table-column>
                <el-table-column prop="sample_processes" label="工序名称" width="200"></el-table-column>
                <el-table-column prop="time" label="记时测算" width="200">
                    <template slot-scope="{ row }">
                        <el-input :min="0" placeholder="0" v-model.trim="row.time" size="mini" type="number"></el-input>
                    </template>
                </el-table-column>
                <el-table-column> </el-table-column>
            </el-table>
        </el-col>

        <!--选择样衣工序-->
        <el-dialog title="选择样衣工序" :visible.sync="processVisible" top="10px" :close-on-click-modal="false" width="500px">
            <el-row>
                <el-table :data="processData" ref="processRef" style="width: 100%" max-height="400px" size="mini" v-loading="loading" @selection-change="selectionChange">
                    <el-table-column type="selection" align="center" width="50"></el-table-column>
                    <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
                    <el-table-column label="工序名称" align="center" prop="name" show-overflow-tooltip></el-table-column>
                </el-table>
            </el-row>
            <div slot="footer">
                <el-button @click="processVisible=false;" size="small" plain>退 出</el-button>
                <el-button type="primary" @click="saveBtn" size="small" :disabled="selectData.length==0">确 定</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>

import {sampleList} from "../../../api/bs/info";

export default {
    name: "designYyEd",
    props: {
        yyData:{
            type: Array,
            default: []
        },
        height: {
            type: Number,
            default: 0
        },
        isEdit:{
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            user: {},
            nodeActions: [],

            processVisible: false,
            processData: [],
            selectData: [],
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    watch:{

    },
    methods: {
        delBtn(index){
            this.$confirm(`确认删除该工序, 是否继续`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.yyData.splice(index, 1);
            }).catch(() => {

            })
        },
        openBtn(){
            this.processVisible = true;
            this.processData = [];
            this.loading = true;
            sampleList({page: 1, limit: 20}).then((res) => {
                this.loading = false;
                this.processData = res.data.data;
            })
        },
        selectionChange(val){
            this.selectData = val;
        },
        saveBtn(){
            let position = this.yyData.length > 0 ? this.yyData[this.yyData.length-1].position+1 : 1;
            this.selectData.forEach(item => {
                this.yyData.push({
                    position: position,
                    sample_processes: item.name,
                    sample_processes_id: item.id,
                    time: 0
                });
            });
            this.processVisible = false;
            this.$refs.processRef.clearSelection();
        },
    },
    mounted() {

    }
}
</script>

<style scoped>
.yy-table-box /deep/ .el-input__inner {
    padding: 0 0 !important;
    border: none !important;
}
</style>
